import React from 'react';
import { Button, Modal, Form, Input, Select, Icon, DatePicker, Row, Col, Upload} from 'antd';
import { exportWord } from 'mhtml-to-word'

import styles from '../style.less'

const CheckIntroduce = Form.create({ name: 'introduce_form' })(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {

        state = {
            content: this.props.content
        }
        

        componentDidMount() {
        }

        toWord = () => {
            const { content } = this.props

            const model = `
                        <div style={{display:'flex',flexDirection:'column',alignItems:'center',width:'80%',margin:'auto'}}>
                            <h1 style={{fontSize:'1.5rem'}}>${content.title}(${content.time}年第${content.qishu}期)</h1>
                            <p style={{
                                textIndent: '30px',
                                padding: '0 30px',
                                letterSpacing: '1px',
                                color: 'rgb(0,0,0,0.85)',
                                fontSize: '15px',
                                lineHeight:'18px'
                            }}>${content.content}</p>
                            <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap'}}>
                                <img style={{width:'43%', margin:'2% 3%'}} src=${content.picture[0].url}
                            </div>
                        </div>
                        `
            exportWord({
                mhtml: model,
                data: {title: "exportword"},
                filename: "exportTest",
                style: "span{ font-size:30px; }"
            })
        }
        
        render() {
            const { visible, onCancel, onEdit, content } = this.props

            return (
                <Modal
                    visible={visible}
                    title="服务简讯详情"
                    width='60%'
                    onCancel={onCancel}
                    // onOk={onCreate}
                    footer={false}
                >   
                    <div>
                        <a onClick={this.toWord}>导出简讯</a>
                        <a onClick={onEdit}>编辑</a>
                    </div>
                    <div style={{display:'flex',flexDirection:'column',alignItems:'center',width:'80%',margin:'auto'}}>
                        <h1 style={{fontSize:'1.5rem'}}>{content.title}({content.time}年第{content.qishu}期)</h1>
                        <p style={{
                            textIndent: '30px',
                            padding: '0 30px',
                            letterSpacing: '1px',
                            color: 'rgb(0,0,0,0.85)',
                            fontSize: '15px',
                            lineHeight:'18px'
                        }}>{content.content}</p>
                        <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap'}}>
                            { content.picture ? content.picture.map(val => (<img style={{width:'43%', margin:'2% 3%'}} src={val.url} alt=""/>)) : ''}

                        </div>
                    </div>



                </Modal>
            )
        }
    }
)



export default CheckIntroduce